import { ReactNode } from 'react';

import { Button, ButtonVariants } from '@/shared/ui';
import cn from 'classnames';
import Image, { StaticImageData } from 'next/image';

import cs from './Placeholder.module.scss';

export const Placeholder = ({
  icon,
  text,
  buttonText,
  onClick,
  className,
}: {
  icon: ReactNode | StaticImageData;
  text: string | ReactNode;
  buttonText?: string;
  onClick?: () => void;
  className?: string;
}) => {
  const isImage = (item: any): item is StaticImageData => 'src' in item;
  const getIconComponent = (): ReactNode => {
    if (isImage(icon)) {
      return <Image alt="icon" draggable="false" fill src={icon.src} />;
    }
    return icon;
  };

  return (
    <div className={cn(cs.container, className)}>
      <div className={cs.icon}>{getIconComponent()}</div>
      <p className={cn(cs.text, 'p')}>{text}</p>
      {buttonText && (
        <Button
          className={cs.button}
          data-testid="button-placeholder"
          onClick={() => onClick?.()}
          variant={ButtonVariants.Primary}
        >
          {buttonText}
        </Button>
      )}
    </div>
  );
};
